<template>
  <div id="show-map" style="height: 400px; width: 400px"></div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

const props = defineProps({
  isShowMap: {
    type: Boolean,
    default: false,
  },
  showPolygonData: {
    type: Array,
    default: [],
  },
});

const map = ref(null);
const polygon = ref(null);
const polyEditor = ref(null);
const PolygonoArr = ref([]);
const isShowMap = ref(false);

const initMap = () => {
  AMapLoader.load({
    key: "3e4c1f76807c5beae8aef6c4a6af69dd",
    version: "2.0",
    plugins: ["AMap.Polygon", "AMap.PolyEditor", "AMap.PolygonEditor"],
  }).then((AMap) => {
    map.value = new AMap.Map("show-map", { zoom: 8, center: props.showPolygonData[0] });
    //控制地图双击是否放大
    map.value.setStatus({ doubleClickZoom: true });

    polygon.value = new AMap.Polygon({
      path: props.showPolygonData,
      strokeColor: "#1b38d3",
      strokeOpacity: 1,
      strokeWeight: 3,
      fillColor: "#1b38d3",
      fillOpacity: 0,
      zIndex: 50,
    });

    // 创建多边形编辑器对象
    polyEditor.value = new AMap.PolygonEditor(map.value, polygon.value);
    map.value.add([polygon.value]);
  });
};

watch(
  () => props.isShowMap,
  (newVal) => {
    console.log("newnew", newVal);
    if (newVal) {
      initMap();
    }
  }
);

watch(
  () => props.showPolygonData,
  (newVal) => {
    if (props.isShowMap) {
      initMap();
    }
  }
);

onMounted(() => {
  if (props.isShowMap) {
    initMap();
  }
});
</script>

<style>
/* 你的样式代码 */
</style>
